<style lang="less" scoped>
    .productversion {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        //display: flex;
        .ivu-modal {
            width: 800px !important;
        }
    }
</style>
<template>
    <div class="productversion">
        <my-card v-if="$route.params.id != 'all'" cardtitle="当前产品：" :showright="false">
            <Table :columns="cpcplumns" :data="mydata" style="margin-bottom: 10px"></Table>
        </my-card>
        <card-table
            style="margin-top: 10px"
            cardtitle="BOM列表"
            addbuttext="添加物料"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            :addbtn="true"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
        </card-table>
        <Modal
            v-model="addbom"
            title="添加物料"
            @on-ok="bomOk"
            :loading="loading"
            @on-cancel="cancel">
            <Form :model="wlform" :label-width="80">
                <FormItem label="请选择物料:">
                    <Select v-model="wlform.mids" filterable>
                        <Option v-for="item in wldata" :value="item.id" :key="item.id">
                            <span>{{ item.nub }}</span>
                            <span style="float:right;color:#ccc">{{ item.name }}</span>
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="请选择数量:">
                    <InputNumber :max="999" :min="1" v-model="wlform.numbers"></InputNumber>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="updatebom"
            title="修改BOM"
            @on-ok="updataBom"
            :loading="loading"
            @on-cancel="cancel">
            <Form :model="updateform" :label-width="80">
                <FormItem label="请选择数量:">
                    <InputNumber :max="999" :min="1" v-model="updateform.number"></InputNumber>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    export default {
        name: 'productversion',
        props: ['id'],
        data () {
            return {
                cpcplumns: [
                    {
                        title: '产品编号',
                        key: 'nub',
                        width: 130
                    },
                    {
                        title: '客户产品编号',
                        key: 'cnumber',
                        width: 130
                    },
                    {
                        title: '产品名称',
                        key: 'name'
                    },
                    {
                        title: '产品规格',
                        key: 'norm'
                    },
                    {
                        title: '产品颜色',
                        key: 'color'
                    },
                    {
                        title: '机种',
                        key: 'machine',
                        render: (h, params) => {
                            let data = ''
                            for (let i in params.row.machine) {
                                data += params.row.machine[i] + ','
                            }
                            return h('span', data.substring(0, data.length - 1))
                        }
                    },
                    {
                        title: '单位',
                        key: 'unit',
                        width: 80
                    },
                    {
                        title: '图号',
                        key: 'version',
                        width: 120
                    }
                ],
                columns: [
                    {
                        title: '物料编号',
                        key: 'nub',
                        width: 180
                    },
                    {
                        title: '物料名称',
                        key: 'name'
                    },
                    {
                        title: '颜色',
                        key: 'color',
                        width: 80
                    },
                    {
                        title: '数量',
                        key: 'number',
                        width: 180,
                        render: (h, params) => {
                            return h('span', params.row.number + params.row.unit)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    on: {
                                        'click': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            this.updateform.number = parseInt(params.row.number)
                                            this.updateform.id = params.row.id
                                            this.updateform.pid = this.$route.params.id
                                            this.updatebom = true
                                        }
                                    }
                                }, '修改'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确认删除这条内容吗？',
                                        placement: 'left'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            this.http.deleteBOM(this, {id: params.row.id, pid: this.$route.params.id})
                                        },
                                        'on-cancel': () => {
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'text'
                                        }
                                    }, '移除')
                                ])
                            ]);
                        }
                    }
                ],
                mydata: [],
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '物料编号',
                        value: 'nub'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '物料编号',
                        key: 'nub',
                        placeholder: '输入物料编号'
                    }
                ],  //  搜索表单item
                current: null,
                pid: null,
                loading: true,
                addbom: false,
                updatebom: false,
                wldata: this.$store.state.materiel,
                wlform: {
                    mids: '',
                    numbers: 1
                },
                updateform: {
                    number: 1
                }
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addbom = true
            },
            refresh () {
                this.http.getAllBOM(this, {id: this.$route.params.id})
            },
            onCurrentChange (current) {
                this.current = current
            },
            bomOk () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                console.log(this.wlform)
                this.wlform.pid = this.$route.params.id
                this.http.addBOM(this, this.wlform)
            },
            updataBom () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.http.updateBOM(this, this.updateform)
            },
            cancel () {
            }
        },
        watch: {
            '$store.state.materiel': {
                handler: function (val, oldVal) {
                    this.wldata = val
                },
                deep: true
            },
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '31'
                    }) ? true : false
                },
                deep: true
            }
        },
        computed: {
        },
        components: {
            CardTable,
            MyCard
        },
        activated () {
            console.log(this.pid, 'active')
            if (this.pid != null && this.pid != this.$route.params.id) {
                console.log('重新请求')
                this.http.getAllBOM(this, {id: this.$route.params.id})
            }
        },
        mounted: function () {
            this.http.getAllBOM(this, {id: this.$route.params.id})
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '31'
            }) ? true : false
        }
    };
</script>
